<template>
  <div class="auth">
    <h2>验证码</h2>
    <div class="topic">
      <a>{{a}}</a>
      <a>{{symbol}}</a>
      <a>{{b}}</a>
      <a>=</a>
      <!-- <a>{{result}}</a> -->
      <input type="text" placeholder="?" v-model="sum" />
    </div>
    <div class="btns">
      <el-button type="primary" @click="resetClick" class="el-icon-refresh-right">刷新</el-button>
      <el-button type="success" @click="authClick" class="el-icon-circle-check">点击验证</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      result: undefined, //结果
      a: undefined, //第一个值
      b: undefined, //第二个值
      symbolArr: ["+", "-", "*"],
      symbol: "", //符号
      sum: "", //用户输入值
    };
  },
  mounted() {
    this.create();
  },
  methods: {
    // 创建验证码函数
    create() {
      let a = Math.floor(Math.random() * 10);
      this.a = a;
      let b = Math.floor(Math.random() * 10);
      this.b = b;
      let symbol = this.symbolArr[Math.floor(Math.random() * 3)];
      this.symbol = symbol;
      symbol === "+"
        ? (this.result = a + b)
        : symbol === "-"
        ? (this.result = a - b)
        : (this.result = a * b);
    },
    // 点击验证的回调
    authClick() {
      // 判断用户输入值是否与正常值相等
      if (this.result === this.sum * 1) {
        // 验证成功,自动关闭验证框
        this.$message({
          message: "验证成功",
          type: "success",
        });
        this.$emit("close", false);
      } else {
        this.$message({
          message: "验证失败,请重新输入",
          type: "error",
        });
        this.resetClick();
      }
    },
    // 刷新回调
    resetClick() {
      this.create();
      this.sum = "";
    },
  },
};
</script>

<style lang="less" scoped>
.auth {
  width: 100%;
  height: 100%;
  h2 {
    padding: 20px 0;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: white;
  }
  .topic {
    display: flex;
    justify-content: center;
    a {
      width: 80px;
      height: 80px;
      line-height: 80px;
      text-align: center;
      background: #008c8c;
      color: #fff;
      font-size: 30px;
      font-weight: 700;
    }
    a:nth-child(1) {
      background: #cbc69e;
      border-radius: 10px 0 0 10px;
    }
    a:nth-child(2) {
      background: #bbb5b7;
    }
    a:nth-child(3) {
      background: #906b62;
    }
    a:nth-child(4) {
      background: #636b5e;
    }
    input {
      width: 80px;
      height: 80px;
      line-height: 80px;
      color: #fff;
      font-size: 30px;
      font-weight: 700;
      text-align: center;
      border: none;
      background: #008c8c;
      border-radius: 0 10px 10px 0;
    }
  }
  .btns {
    padding: 30px 0;
    text-align: center;
  }
}
</style>